<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DevOps平台 - 统一访问界面</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        .iframe-container {
            height: calc(100vh - 200px);
            min-height: 600px;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .custom-scrollbar {
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 #f1f5f9;
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 8px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
</head>
<body class="bg-base-100">
    <!-- 顶部导航 -->
    <div class="navbar bg-primary text-primary-content shadow-lg">
        <div class="navbar-start">
            <div class="dropdown">
                <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
                    <i class="fas fa-bars text-xl"></i>
                </div>
            </div>
            <a class="btn btn-ghost text-xl font-bold">
                <i class="fas fa-rocket mr-2"></i>
                DevOps 统一平台
            </a>
        </div>
        <div class="navbar-center hidden lg:flex">
            <div class="text-sm opacity-90">
                <i class="fas fa-globe mr-2"></i>
                一站式访问所有功能模块
            </div>
        </div>
        <div class="navbar-end">
            <div class="dropdown dropdown-end">
                <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
                    <i class="fas fa-palette text-xl"></i>
                </div>
                <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
                    <li><a onclick="setTheme('light')"><i class="fas fa-sun mr-2"></i>浅色主题</a></li>
                    <li><a onclick="setTheme('dark')"><i class="fas fa-moon mr-2"></i>深色主题</a></li>
                    <li><a onclick="setTheme('cupcake')"><i class="fas fa-heart mr-2"></i>温馨主题</a></li>
                    <li><a onclick="setTheme('business')"><i class="fas fa-briefcase mr-2"></i>商务主题</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="container mx-auto px-4 py-6">
        <!-- 页面标题 -->
        <div class="text-center mb-8">
            <h1 class="text-4xl font-bold text-primary mb-4">
                <i class="fas fa-layer-group mr-3"></i>
                DevOps 平台统一访问界面
            </h1>
            <p class="text-lg text-base-content/70">
                在一个界面中访问所有功能模块，提升工作效率
            </p>
        </div>

        <!-- 标签页导航 -->
        <div class="tabs tabs-boxed justify-center mb-6 bg-base-200 p-2 rounded-xl shadow-lg">
            <a class="tab tab-active font-semibold" onclick="showTab('index')" id="tab-index">
                <i class="fas fa-home mr-2"></i>主页
            </a>
            <a class="tab font-semibold" onclick="showTab('dashboard')" id="tab-dashboard">
                <i class="fas fa-tachometer-alt mr-2"></i>仪表板
            </a>
            <a class="tab font-semibold" onclick="showTab('projects')" id="tab-projects">
                <i class="fas fa-project-diagram mr-2"></i>项目管理
            </a>
            <a class="tab font-semibold" onclick="showTab('deployment')" id="tab-deployment">
                <i class="fas fa-rocket mr-2"></i>部署管理
            </a>
            <a class="tab font-semibold" onclick="showTab('monitoring')" id="tab-monitoring">
                <i class="fas fa-chart-line mr-2"></i>监控中心
            </a>
            <a class="tab font-semibold" onclick="showTab('logs')" id="tab-logs">
                <i class="fas fa-file-alt mr-2"></i>日志管理
            </a>
            <a class="tab font-semibold" onclick="showTab('config')" id="tab-config">
                <i class="fas fa-cog mr-2"></i>系统配置
            </a>
        </div>

        <!-- 内容区域 -->
        <div class="card bg-base-100 shadow-xl border border-base-300">
            <div class="card-body p-0">
                <!-- 主页内容 -->
                <div id="content-index" class="tab-content active">
                    <div class="iframe-container">
                        <iframe src="index.html" class="w-full h-full border-0 rounded-lg custom-scrollbar" 
                                title="DevOps平台主页"></iframe>
                    </div>
                </div>

                <!-- 仪表板内容 -->
                <div id="content-dashboard" class="tab-content">
                    <div class="iframe-container">
                        <iframe src="dashboard.html" class="w-full h-full border-0 rounded-lg custom-scrollbar" 
                                title="DevOps仪表板"></iframe>
                    </div>
                </div>

                <!-- 项目管理内容 -->
                <div id="content-projects" class="tab-content">
                    <div class="iframe-container">
                        <iframe src="projects.html" class="w-full h-full border-0 rounded-lg custom-scrollbar" 
                                title="项目管理"></iframe>
                    </div>
                </div>

                <!-- 部署管理内容 -->
                <div id="content-deployment" class="tab-content">
                    <div class="iframe-container">
                        <iframe src="deployment.html" class="w-full h-full border-0 rounded-lg custom-scrollbar" 
                                title="部署管理"></iframe>
                    </div>
                </div>

                <!-- 监控中心内容 -->
                <div id="content-monitoring" class="tab-content">
                    <div class="iframe-container">
                        <iframe src="monitoring.html" class="w-full h-full border-0 rounded-lg custom-scrollbar" 
                                title="监控中心"></iframe>
                    </div>
                </div>

                <!-- 日志管理内容 -->
                <div id="content-logs" class="tab-content">
                    <div class="iframe-container">
                        <iframe src="logs.html" class="w-full h-full border-0 rounded-lg custom-scrollbar" 
                                title="日志管理"></iframe>
                    </div>
                </div>

                <!-- 系统配置内容 -->
                <div id="content-config" class="tab-content">
                    <div class="iframe-container">
                        <iframe src="config.html" class="w-full h-full border-0 rounded-lg custom-scrollbar" 
                                title="系统配置"></iframe>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部信息 -->
        <div class="text-center mt-8 p-6 bg-base-200 rounded-xl">
            <div class="flex flex-wrap justify-center items-center gap-6 text-sm text-base-content/70">
                <div class="flex items-center">
                    <i class="fas fa-info-circle mr-2 text-info"></i>
                    <span>统一访问界面</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-layer-group mr-2 text-success"></i>
                    <span>7个功能模块</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-mobile-alt mr-2 text-warning"></i>
                    <span>响应式设计</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-palette mr-2 text-secondary"></i>
                    <span>多主题支持</span>
                </div>
            </div>
            <div class="mt-4 text-xs text-base-content/50">
                <i class="fas fa-link mr-1"></i>
                来源: <a href="https://blog.csdn.net/2401_86478612/article/details/148937220" 
                        class="link link-primary" target="_blank">
                    DevOps自动化运维管理平台设计与实现
                </a>
            </div>
        </div>
    </div>

    <script>
        // 标签页切换功能
        function showTab(tabName) {
            // 隐藏所有内容
            const contents = document.querySelectorAll('.tab-content');
            contents.forEach(content => {
                content.classList.remove('active');
            });

            // 移除所有标签的激活状态
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => {
                tab.classList.remove('tab-active');
            });

            // 显示选中的内容
            document.getElementById('content-' + tabName).classList.add('active');
            document.getElementById('tab-' + tabName).classList.add('tab-active');

            // 保存当前标签状态
            localStorage.setItem('activeTab', tabName);
        }

        // 主题切换功能
        function setTheme(theme) {
            document.documentElement.setAttribute('data-theme', theme);
            localStorage.setItem('theme', theme);
            
            // 显示切换成功提示
            const toast = document.createElement('div');
            toast.className = 'toast toast-top toast-center z-50';
            toast.innerHTML = `
                <div class="alert alert-success">
                    <i class="fas fa-check-circle mr-2"></i>
                    <span>主题已切换为: ${getThemeName(theme)}</span>
                </div>
            `;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                document.body.removeChild(toast);
            }, 2000);
        }

        function getThemeName(theme) {
            const themeNames = {
                'light': '浅色主题',
                'dark': '深色主题',
                'cupcake': '温馨主题',
                'business': '商务主题'
            };
            return themeNames[theme] || theme;
        }

        // 页面加载时恢复状态
        document.addEventListener('DOMContentLoaded', function() {
            // 恢复主题
            const savedTheme = localStorage.getItem('theme') || 'light';
            document.documentElement.setAttribute('data-theme', savedTheme);

            // 恢复活动标签
            const savedTab = localStorage.getItem('activeTab') || 'index';
            if (savedTab !== 'index') {
                showTab(savedTab);
            }

            // 添加加载动画
            const iframes = document.querySelectorAll('iframe');
            iframes.forEach(iframe => {
                iframe.addEventListener('load', function() {
                    this.style.opacity = '1';
                });
                iframe.style.opacity = '0';
                iframe.style.transition = 'opacity 0.3s ease-in-out';
            });
        });

        // 键盘快捷键支持
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey || e.metaKey) {
                const tabs = ['index', 'dashboard', 'projects', 'deployment', 'monitoring', 'logs', 'config'];
                const key = parseInt(e.key);
                if (key >= 1 && key <= tabs.length) {
                    e.preventDefault();
                    showTab(tabs[key - 1]);
                }
            }
        });

        // 添加页面切换动画
        function addSwitchAnimation() {
            const activeContent = document.querySelector('.tab-content.active');
            if (activeContent) {
                activeContent.style.animation = 'fadeIn 0.3s ease-in-out';
            }
        }

        // CSS动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            
            .tab {
                transition: all 0.2s ease-in-out;
            }
            
            .tab:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            }
            
            iframe {
                border-radius: 8px;
                box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>